<!-- 年级的数据 -->
<template>
  <div class>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="选择时间">
        <elNiceTime @change="timeChange"></elNiceTime>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="sizeChangeHandle(pageSize)"
          >搜索</el-button
        >
      </el-form-item>
      <el-button
        type="primary"
        style="float: right;"
        size="small"
        @click="gradeStatisticsexcelFn"
        >导出</el-button
      >
    </el-form>
    <div>
      <el-table
        :data="lms_list"
        style="width: 100%"
        header-cell-class-name="thead_f"
      >
        <el-table-column label="年级" width="100">
          <template slot-scope="scope">
            <b>{{ scope.row.grade_name || "--" }}</b>
          </template>
        </el-table-column>
        <el-table-column label="拟报名人数">
          <template slot-scope="scope">
            <b>{{ scope.row.total_plan_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="总报名人数">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="报名成功1个课程以上的学生人数"
              placement="bottom"
            >
              <div>总报名人数</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.total_sign_up_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="报名率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="报名人数/拟报名人数"
              placement="bottom"
            >
              <div>报名率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(scope.row.total_sign_up_num, scope.row.total_plan_num)
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="应出勤课次">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="全部学生所有课程所有讲次有讲次任务的任务数量"
              placement="bottom"
            >
              <div>应出勤课次</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.should_attendance_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="出勤课次">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="全部学生全部课程所有讲次有签到的数量"
              placement="bottom"
            >
              <div>出勤课次</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.attendance || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="课次出勤率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="出勤课次/应出勤课次"
              placement="bottom"
            >
              <div>课次出勤率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(scope.row.attendance, scope.row.should_attendance_num)
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="到课学生数">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="所有课程有1讲及以上签到的学生总数"
              placement="bottom"
            >
              <div>到课学生数</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.attendance_class_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="到课率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="到课的学生人数/报名的学生人数"
              placement="bottom"
            >
              <div>到课率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(scope.row.attendance, scope.row.should_attendance_num)
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="参课人数">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="所有课程有1讲以上完课的学生人数"
              placement="bottom"
            >
              <div>参课人数</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.join_class_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="参课率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="参课人数/报名人数"
              placement="bottom"
            >
              <div>参课率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(scope.row.join_class_num, scope.row.total_sign_up_num)
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="转化人数">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="0付费的学生购买正价课程的人数"
              placement="bottom"
            >
              <div>转化人数</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.convert_user_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="转化率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="转化的人数/到课学生数"
              placement="bottom"
            >
              <div>转化率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(
                scope.row.convert_user_num,
                scope.row.attendance_class_num
              )
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="课次转化率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="转化课次数/到课学生课次数"
              placement="bottom"
            >
              <div>课次转化率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(
                scope.row.convert_period_num,
                scope.row.attendance_period_num
              )
            }}</b>
          </template>
        </el-table-column>
        <el-table-column label="续费人数">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="已购买正价课的学生再次购买正价课的人数"
              placement="bottom"
            >
              <div>续费人数</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{ scope.row.renewal_user_num || 0 }}</b>
          </template>
        </el-table-column>
        <el-table-column label="续费率">
          <template slot="header" slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="续费人数/转化人数"
              placement="bottom"
            >
              <div>续费率</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <b>{{
              returnRate(scope.row.renewal_user_num, scope.row.convert_user_num)
            }}</b>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { gradeStatistics, gradeStatisticsexcel } from "@/api/operate.js";
import utils from "@/utils/common.js";
export default {
  props: {
    selectEnums: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  // import引入的组件需要注入到对象中才能使用
  components: {
    elNiceTime: resolve =>
      require(["@/views/modules/operate-center/el-nice-time.vue"], resolve)
  },
  data() {
    // 这里存放数据
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      param: {
        start_time: "",
        end_time: ""
      },
      selectArr: [],
      lms_list: [],
      userList: [],
      loadingOnce: true
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    timeChange(val) {
      this.param = {
        ...this.param,
        ...val
      };
      if (this.loadingOnce) {
        this.loadingOnce = false;
        this.gradeStatisticsFn();
      }
    },
    // 返回计算好的比例
    returnRate(f, z) {
      return utils.returnRate(f, z);
    },
    // 下拉选项过多时过滤
    userFilter(query = "") {
      if (this.selectEnums.school_agents) {
        let arr = this.selectEnums.school_agents.filter(item => {
          return (
            item &&
            ((item.name && item.name.includes(query)) ||
              (item.user_id && String(item.user_id).includes(query)))
          );
        });
        if (arr.length > 50) {
          this.userList = arr.slice(0, 50);
        } else {
          this.userList = arr;
        }
      }
    },
    sToHS(s) {
      return utils.sToHS(s);
    },
    // 点击导出Excel
    gradeStatisticsexcelFn() {
      let { param } = this;
      gradeStatisticsexcel(param).then(res => {
        if (!res[0]) {
          utils.downExcel(
            res,
            `年级统计表${param.agent_name ? "-" + param.agent_name : ""}${
              param.start_time
                ? "-" + param.start_time + "-" + param.end_time
                : ""
            }`
          );
        }
      });
    },
    // 获取学校的列表
    gradeStatisticsFn() {
      let { param } = this;
      param = {
        ...param,
        ...{
          currPage: this.pageIndex,
          pageSize: this.pageSize
        }
      };
      gradeStatistics(param).then(res => {
        if (res && res[1].code == 0) {
          this.lms_list = res[1].data.statisticsList;
          this.totalPage = res[1].data.totalCount;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.gradeStatisticsFn();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.gradeStatisticsFn();
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.userFilter("");
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
b {
  font-size: 20px;
}
</style>
